<template>
    <div class="productDetail">
        <div class="product-box">
            <!-- <van-image class="product-img" fit="cover" :src="$store.state.imageHost+goodsForm.goodsImages[active].url"></van-image> -->
            <van-swipe indicator-color="white" :initial-swipe="active" @change="onChangeSwipe">
                <van-swipe-item v-for="(item,index) in goodsForm.goodsImages" :key="index">
                    <van-image class="product-img" fit="cover" :src="$store.state.imageHost+item.url"></van-image>
                </van-swipe-item>
            </van-swipe>
            <div class="product-img-list">
                <van-tabs v-model="active" @click="onClick" swipeable>
                    <van-tab  v-for="(item,index) in goodsForm.goodsImages" :key="index">
                        <template #title>
                            <van-image  class="product-smail-img" :src="$store.state.imageHost+item.url"></van-image> 
                        </template>
                    </van-tab>
                </van-tabs>
                
            </div>
        </div>
        
        <div class="product-content">
            <div class="title">{{goodsForm.goodsName}}</div> 
            <!-- <div class="prices" v-if="$store.state.userInfo&&$store.state.userInfo.ordersDoneNum > 0">
                <div class="first-price"><span class="price">${{item.goodsType == 3?item.levelSaleLimit:item.goodsPrice}}</span><span>/1包</span></div>
            </div> -->
            <div class="prices">
                <div class="first-price">
                    <span class="price">${{goodsForm.goodsPrice}}</span><span>/{{  $i18n.t('default.home.package') }}</span> &nbsp;&nbsp;&nbsp;
                    <!-- <span class="old-price">会员价: ${{goodsForm.goodsPriceMember}}</span>/包 -->
                </div>
                <div class="last-price"></div>
            </div>
            <div class="product-desc">
                <div class="product-desc-title">{{  $i18n.t('default.home.quantity') }}</div>
                <van-stepper :disabled="goodsForm.goodsType==2?false:true" :value="goodsNum" min="1" max="99" @change="onChange"/>
            </div>
        </div>
        <div class="intro-html">
            <div v-html="goodsForm.goodsIntro"></div>
        </div>
        <div style="height: 1rem;"></div>
        <div class="fixed-bottom">
            <van-button 
                size="large" 
                class="btn home-button" 
                @click="gotoPage"
            >{{  $i18n.t('default.home.buy') }} ${{totalAmout}}</van-button>
        </div>
    </div>
</template>

<script>

export default {
  data() {
    return {
        active: 0,
        goodsID: '',
        goodsForm: {
            createTime:  0,
            goodsBanner: "",
            goodsID: 0,
            goodsImage: "",
            goodsImages: "",
            goodsIntro: "",
            goodsName: "",
            goodsPrice: null,
            goodsPriceMember: null,
            goodsState: 1,
        },
        totalAmout: '',
        goodsNum: 1,
        stepNum: 1,
        imageList:[
            {
                url:require('../../assets/image/beijing1.png')
            }, {
                url:require('../../assets/image/beijing1.png')
            }, {
                url:require('../../assets/image/beijing1.png')
            }, {
                url:require('../../assets/image/beijing1.png')
            }, {
                url:require('../../assets/image/beijing1.png')
            }
        ],
    }
  },

  created() {
    this.init();
  },
  methods: {
    init(){
        this.goodsForm.goodsID =  this.$route.query.goodsID?this.$route.query.goodsID:this.$store.state.goodsID;
        if(this.$route.query.goodsID){
            this.goodsForm = JSON.parse(this.$route.query.goodsItem);
        }
        this.totalAmout = this.goodsForm.goodsPrice
        // this.$api.get('/goods/info/'+this.goodsForm.goodsID).then(res=>{
        //   console.log('home...res:',res)
        //   if(res.code == 'SUCCESS'){
        //     this.goodsForm = res.data;
        //     this.totalAmout = this.$store.state.userInfo&&this.$store.state.userInfo.ordersDoneNum > 0?this.goodsForm.goodsPriceMember:this.goodsForm.goodsPrice;
        //     let objarr = null;
        //     if(this.goodsForm){
        //         if(this.goodsForm.goodsImages){
        //             this.goodsForm.goodsImages = this.goodsForm.goodsImages.split(','); // 将所有的"key=value"格式替换为key: "value"
        //             for(let i in this.goodsForm.goodsImages){
        //                 this.goodsForm.goodsImages[i] = JSON.parse(this.goodsForm.goodsImages[i]);
        //             }
        //         }
        //         console.log('goodsImages: ',this.goodsForm.goodsImages,this.goodsForm.goodsImages.length)
                
        //     }
        //   }
        // })
    },
    isJSON(str) {
        if (typeof str == 'string') {
            try {
                var obj=JSON.parse(str);
                if(typeof obj == 'object' && obj ){
                    return true;
                }else{
                    return false;
                }

            } catch(e) {
                console.log('error：'+str+'!!!'+e);
                return false;
            }
        }else{
            return false
        }
    },
    onClick(index){
        console.log(index);
        this.active = index;
        console.log(this.$store.state.imageHost,this.goodsForm.goodsImages[this.active]);

    },
    onChangeSwipe(index){
        console.log('swipe',index);
        this.active = index;
    },
    onChange(event) {
        console.log(event);
        // this.goodsNum = event;
        // if(this.$store.state.userInfo&&this.$store.state.userInfo.ordersDoneNum > 0){
        //     this.totalAmout = event * this.goodsForm.goodsPriceMember;
        // } else {
        //     this.totalAmout = event * this.goodsForm.goodsPrice;
        // }
        this.goodsNum = event;
        this.totalAmout = event * this.goodsForm.goodsPrice;
    },
    gotoPage(){
        this.$store.commit('setGoodsID',this.goodsForm.goodsID);
        this.$router.push({path: '/orderDetail',query:{
            goodsID:this.goodsForm.goodsID,
            goodsNum:this.goodsNum,
            totalAmout:this.totalAmout,
            goodsItem:JSON.stringify(this.goodsForm)
        }})
    },
  }
}

</script>

<style scoped lang="scss">
@import "@/assets/css/variable.scss";
.productDetail{
    background: #fff;
}
.product-box{
    background: #fff;
    .product-img{
        width: 100%;
        height: 6.7rem;
    }
    .product-img-list{
        height: 1.4rem;
        padding: .2rem .3rem;
        // margin-top: -4px;
        .product-smail-img{
            height: .8rem;
            width: .8rem;
            margin-right: .2rem;
            &::last-child{
                margin-right: 0;
            }
        }
    }
}
.product-content{
    
    padding: 0 .3rem;
    .title{
        margin-top: .26rem;
        font-size: .32rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .prices{
        margin-top: .28rem; 
        color:#323232;
        display: flex;
        align-items: flex-end;
        height: .7rem;
        .price{
            color: $money;
            font-size: .48rem;
        }
        .first-price{
            margin-right: .32rem;
            height: 0.7rem;
        }
        
    }
    .product-desc{
        display: flex;
        justify-content: space-between;
        margin-top: .42rem;
    }
}
.intro-html{
    margin-top: 1rem;
}
.fixed-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1rem;
    .btn{
        height: 1rem;
        border-radius: 0;
        font-size: .36rem;
    }
}
</style>

<style>
.van-image{
    display: flex;
}
.van-tabs__line{
    left: -6px;
    background-color: #F2CB51;
}
.van-tabs__nav--line{
    height: auto;
}
.van-tabs__wrap--scrollable .van-tab{
    padding: 0;
}
.van-tab{
    flex: 0;
}
</style>